<template>
	<div class="xc-flex xc-flex-column xc-flex-col-center">
		<video v-if="!isError" id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
		<img v-else-if="show" :style="{width:videoWidth+'px',height:videoHeight+'px'}" src="../../../static/img/idcard2.png" />
		<img v-else :style="{width:videoWidth+'px',height:videoHeight+'px'}" src="../../../static/img/idcard.png" />
		<el-button slot="append" type='success' style="width:4.04rem;margin-top:.087rem;height: .58rem;" @click='setImage()'>
			{{this.label}}
		</el-button>
		<div :style="{width:videoWidth+'px',overflow:'scroll'}" v-if="showList && imgList.length">
			<div class="xc-flex xc-padding-tb-10">
				<div class="xc-relative xc-padding-r-10" v-for="(i, k) in imgList" :key="k">
					<img :style="{width:videoWidth*0.2+'px',height:videoHeight*0.2+'px'}" :src="i.file_path" />
					<i @click="handleDelete(i)" class="el-icon-circle-close fon_20 xc-absolute"
						style="color:#F56C6C;cursor: pointer;right:0px;top:0px;"></i>
				</div>
			</div>
		</div>
		<canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
	</div>
</template>

<script>
	import FileApi from '@/api/file.js';
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			max: {
				type: Number,
				default: 5
			},
			label: {
				type: String,
				default: '确认'
			},
			videoWidth: {
				type: Number,
				default: 400
			},
			videoHeight: {
				type: Number,
				default: 300
			},
			showList: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			imgList: {
				get: function() {
					return this.value;
				},
				set: function(e) {
					this.$emit('input', e);
				}
			}
		},
		data() {
			return {
				meta: {
					title: ""
				},

				imgSrc: '',
				isError: false,
				thisCancas: null,
				thisContext: null,
				thisVideo: null,
			}
		},
		mounted() {
			this.getCompetence();
		},
		destroyed() {
			this.stopNavigator();
		},
		methods: {
			handleDelete(i) {
				this.imgList.splice(i, 1)
				this.change();
			},
			change() {
				this.$emit('change', this.imgList)
			},
			/** */
			// 调用权限（打开摄像头功能）
			getCompetence() {
				var _this = this
				this.thisCancas = document.getElementById('canvasCamera')
				this.thisContext = this.thisCancas.getContext('2d')
				this.thisVideo = document.getElementById('videoCamera')
				// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
				if (navigator.mediaDevices === undefined) {
					navigator.mediaDevices = {}
				}
				// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
				// 使用getUserMedia，因为它会覆盖现有的属性。
				// 这里，如果缺少getUserMedia属性，就添加它。
				if (navigator.mediaDevices.getUserMedia === undefined) {
					navigator.mediaDevices.getUserMedia = function(constraints) {
						// 首先获取现存的getUserMedia(如果存在)
						var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
						// 有些浏览器不支持，会返回错误信息
						// 保持接口一致
						if (!getUserMedia) {
							return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
						}
						// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
						return new Promise(function(resolve, reject) {
							getUserMedia.call(navigator, constraints, resolve, reject)
						})
					}
				}
				var constraints = {
					audio: false,
					video: {
						width: this.videoWidth,
						height: this.videoHeight,
						transform: 'scaleX(-1)'
					}
				}
				navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
					// 旧的浏览器可能没有srcObject
					if ('srcObject' in _this.thisVideo) {
						_this.thisVideo.srcObject = stream
					} else {
						// 避免在新的浏览器中使用它，因为它正在被弃用。
						_this.thisVideo.src = window.URL.createObjectURL(stream)
					}
					_this.thisVideo.onloadedmetadata = function(e) {
						_this.thisVideo.play()
					}
				}).catch(err => {
					this.isError = true;
					this.$emit('error', err);
					console.log(err)
				})
			},
			//  绘制图片（拍照功能）

			setImage() {
				var _this = this
				// 点击，canvas画图
				_this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
				// 获取图片base64链接
				var image = this.thisCancas.toDataURL('image/png', 0.3)
				_this.imgSrc = image
				if (this.imgList.length < this.max) {
					console.log('this.imgList: ', this.imgList);
					var img = this.dataURLtoFile(image)
					this.UploadImage({
						file: img
					})
				}
			},
			/*上传图片*/
			UploadImage(param) {
				let self = this;
				const loading = this.$loading({
					lock: true,
					text: '图片上传中,请等待',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				const formData = new FormData();
				formData.append('iFile', param.file);
				formData.append("group_id", null);
				let method = FileApi.doctor_uploadFile(formData);
				method.then(res => {
						if (res.code == 1 && res.data && res.data.file_path) {
							this.imgList.push({
								file_id: res.data.file_id,
								file_path: res.data.file_path
							})
							this.change();

						}
						loading.close();
						// self.getData();
						// param.onSuccess(); // 上传成功的图片会显示绿色的对勾
						// 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
					})
					.catch(response => {
						loading.close();
						self.$message({
							message: '本次上传图片失败',
							type: 'warning'
						});
						param.onError();
					});
			},
			// base64转文件

			dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(',')
				var mime = arr[0].match(/:(.*?);/)[1]
				var bstr = atob(arr[1])
				var n = bstr.length
				var u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new File([u8arr], new Date().getTime() + '.jpg', {
					type: mime
				})
			},
			// 关闭摄像头

			stopNavigator() {
				this.thisVideo.srcObject.getTracks()[0].stop()
			}
		},
	}
</script>

<style>

</style>